<template>
	<div id="menuIndex">
		<el-row>
			<!-- 数据表格 -->
			<el-col :span="24">
				<el-row>
					<el-col :span="24">
						<el-button
							type="primary"
							icon="el-icon-plus"
							@click="
								dialog.isEdit = false;
								dialog.saveOrEditDiv = true;
								getCascaderData();
							"
						>
							新增菜单
						</el-button>
					</el-col>
				</el-row>
				<el-row>
					<el-col :span="24">
						<el-table
							:data="tableData"
							border
							style="width: 100%"
							row-key="menuID"
							:default-expand-all="true"
							lazy
							:tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
						>
							<el-table-column prop="name" label="名称"></el-table-column>
							<el-table-column prop="code" label="编号"></el-table-column>
							<el-table-column prop="type" label="菜单类型">
								<template slot-scope="scope">
									<el-tag v-if="scope.row.type==1" type="info">顶级节点</el-tag>
									<el-tag v-if="scope.row.type==2">功能菜单</el-tag>
									<el-tag v-if="scope.row.type==3" type="warning">功能按钮</el-tag>
								</template>
							</el-table-column>
							<el-table-column prop="urlPath" label="访问地址">
							</el-table-column>
							<el-table-column prop="pathType" label="链接类型">
								<template slot-scope="scope">
									<el-tag v-if="scope.row.pathType==1">内部链接</el-tag>
									<el-tag type="info" v-if="scope.row.pathType==2">外部引入</el-tag>
								</template>
							</el-table-column>
							<el-table-column prop="iconStr" label="功能图标">
								<template slot-scope="scope">
									<i :class="scope.row.iconStr"></i>
								</template>
							</el-table-column>
							<el-table-column prop="isUse" label="是否启用">
								<template slot-scope="scope">
									<el-tag v-if="scope.row.isUse==0">已启用</el-tag>
									<el-tag v-else type="danger">禁用</el-tag>
								</template>
							</el-table-column>
							<el-table-column fixed="right" label="操作" align="center" width="220">
								<template slot-scope="scope">
									<el-button @click="rowShow(scope.row)" size="small" icon="el-icon-search" circle title="查看"></el-button>
									<el-button @click="rowAddSon(scope.row)" type="success" size="small" icon="el-icon-plus" circle title="添加子菜单"></el-button>
									<el-button @click="rowEdit(scope.row)" type="primary" size="small" icon="el-icon-edit" circle title="编辑"></el-button>
									<el-button @click="rowDelete(scope.row)" type="danger" icon="el-icon-delete" size="small" circle title="删除"></el-button>
								</template>
							</el-table-column>
						</el-table>
					</el-col>
				</el-row>
			</el-col>
		</el-row>

		<!-- 添加或修改-业务弹窗 -->
		<el-dialog
			:title="dialog.isEdit == true ? '编辑菜单' : '新增菜单'"
			:visible.sync="dialog.saveOrEditDiv"
			width="80%"
			:show-close="false"
			:destroy-on-close="true"
			:close-on-click-modal="false"
		>
			<el-form ref="saveOrEditDataForm" :rules="saveOrEditDataFormRules" :model="saveOrEditData" label-width="100px">
				<el-form-item label="菜单编号" prop="code">
					<el-input show-word-limit v-model="saveOrEditData.code" placeholder="请输入菜单编号" maxlength="20"></el-input>
				</el-form-item>
				<el-form-item label="菜单名称" prop="name">
					<el-input show-word-limit v-model="saveOrEditData.name" placeholder="请输入菜单名称" maxlength="20"></el-input>
				</el-form-item>
				<el-row>
					<el-col :span="6">
						<el-form-item label="上级菜单" prop="parentID">
							<el-cascader @change="cascaderChange" v-model="saveOrEditData.parentID" :options="cascaderData" :props="{ checkStrictly: true }"></el-cascader>
						</el-form-item>
					</el-col>
					<el-col :span="6">
						<el-form-item label="排序号" prop="orderIndex">
							<el-input-number v-model="saveOrEditData.orderIndex" :min="1" :max="100" label="请定义顺序"></el-input-number>
						</el-form-item>
					</el-col>
					<el-col :span="6">
						<el-form-item label="菜单类型" prop="type">
							<el-select @change="typeChange" v-model="saveOrEditData.type" clearable placeholder="菜单类型">
								<el-option label="顶级节点" :value="1"></el-option>
								<el-option label="功能菜单" :value="2"></el-option>
								<el-option label="功能按钮" :value="3"></el-option>
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :span="6">
						<el-form-item v-if="formDataShow.pathType" label="链接类型" prop="pathType" @change="pathTypeChange">
							<el-select v-model="saveOrEditData.pathType" clearable placeholder="链接类型">
								<el-option label="内部路由" :value="1"></el-option>
								<el-option label="外部引入" :value="2"></el-option>
							</el-select>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row>
					<el-col :span="8">
						<el-form-item v-if="formDataShow.urlPath" label="访问地址" prop="urlPath">
							<el-input show-word-limit v-model="saveOrEditData.urlPath" placeholder="请输入访问地址" maxlength="100"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="8">
						<el-form-item v-if="formDataShow.iconStr" label="功能图标" prop="iconStr">
							<el-select  v-model="saveOrEditData.iconStr" clearable filterable  placeholder="功能图标">
								<el-option v-for="item in iconListData" :key="item" :label="item" :value="item">
									<i :class="item"></i>
									<span>{{ item }}</span>
								</el-option>
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :span="8">
						<el-form-item v-if="formDataShow.isUse" label="是否启用" prop="isUse">
							<el-switch
							    v-model="saveOrEditData.isUse"
							    active-color="#13ce66"
							    :active-value="0"
							    :inactive-value="1">
							  </el-switch>
						</el-form-item>
					</el-col>
				</el-row>
				
				<el-form-item label="备注" prop="comment">
					<el-input
						show-word-limit
						maxlength="150"
						type="textarea"
						:autosize="{ minRows: 2, maxRows: 4 }"
						placeholder="如需备注输入描述"
						v-model="saveOrEditData.comment"
					></el-input>
				</el-form-item>
				<!-- 按钮组 -->
				<el-form-item>
					<el-button type="primary" @click="submitSaveOrEdit" :loading="formLoading">{{ dialog.isEdit == false ? '保存' : '确认修改' }}</el-button>
					<el-button
						@click="
							dialog.saveOrEditDiv = false;
							resetAddOrEditOrShowForm();
						"
					>
						取消
					</el-button>
				</el-form-item>
			</el-form>
		</el-dialog>

		<!-- 查看-业务弹窗 -->
		<el-dialog title="菜单详情" :visible.sync="dialog.showDiv" width="50%" :show-close="false" :destroy-on-close="true" :close-on-click-modal="false">
			<el-form ref="showDataForm" :model="showData" label-width="100px">
				<el-form-item label="菜单编号" prop="code">
					<el-tag v-if="showData.code">{{ showData.code }}</el-tag>
				</el-form-item>
				<el-form-item label="菜单名称" prop="name">
					<el-tag v-if="showData.name">{{ showData.name }}</el-tag>
				</el-form-item>
				<el-row>
					<el-col :span="8">
						<el-form-item label="排序号" prop="orderIndex">
							<el-tag v-if="showData.orderIndex">{{ showData.orderIndex }}</el-tag>
						</el-form-item>
					</el-col>
					<el-col :span="8">
						<el-form-item label="菜单类型" prop="type">
							<el-tag v-if="showData.type==1" type="info">顶级节点</el-tag>
							<el-tag v-if="showData.type==2">功能菜单</el-tag>
							<el-tag v-if="showData.type==3" type="warning">功能按钮</el-tag>
						</el-form-item>
					</el-col>
					<el-col :span="8">
						<el-form-item label="链接类型" prop="pathType">
							<el-tag v-if="showData.pathType==1">内部链接</el-tag>
							<el-tag type="info" v-if="showData.pathType==2">外部引入</el-tag>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row>
					<el-col :span="8">
						<el-form-item label="访问地址" prop="urlPath">
							<el-tag v-if="showData.urlPath">{{ showData.urlPath }}</el-tag>
						</el-form-item>
					</el-col>
					<el-col :span="8">
						<el-form-item label="功能图标" prop="iconStr">
							<el-tag><el-icon v-if="showData.iconStr" :class="showData.iconStr"></el-icon></el-tag>
						</el-form-item>
					</el-col>
					<el-col :span="8">
						<el-form-item label="是否启用" prop="isUse">
							<el-tag v-if="showData.isUse!=null">{{ showData.isUse==0?"启用":"未启用" }}</el-tag>
						</el-form-item>
					</el-col>
				</el-row>
				
				<el-form-item label="备注" prop="comment">
					<el-tag v-if="showData.comment">{{ showData.comment }}</el-tag>
				</el-form-item>
				<!-- 按钮组 -->
				<el-form-item>
					<el-button
						@click="
							dialog.showDiv = false;
							resetAddOrEditOrShowForm();
						"
					>
						关闭
					</el-button>
				</el-form-item>
			</el-form>
		</el-dialog>
	</div>
</template>

<script>
import * as menuAPI from '@/api/menu.js';
export default {
	name: 'menuIndex',
	data() {
		return {
			//查询表单数据
			queryForm: {
				name: null,
				legalPerson: null,
				orgType: null,
				orgState: null
			},
			//表格数据
			tableData: [],
			//主表-分页数据
			pageData: {
				page: 1,
				limit: 10,
				total: 0
			},
			//当前表格复选数据
			nowTableSelected: [],
			//弹窗状态
			dialog: {
				isEdit: false,
				saveOrEditDiv: false,
				showDiv: false
			},
			//添加或编辑表单数据
			saveOrEditData: {
				comment: null,
				name: null,
				code: null,
				parentID: "-1",
				type:1,
				level:1,
				orderIndex:1,
				urlPath:null,
				pathType:1,
				iconStr:null,
				isUse:0,
				innerCode:null
			},
			//组织选择级联下拉数据
			cascaderData: [],
			//添加编辑表单-检验
			saveOrEditDataFormRules: {
				code: { required: true, message: '请输入菜单编号', trigger: 'blur' },
				name: { required: true, message: '请输入菜单名称', trigger: 'blur' },
				parentID: { required: true, message: '请选择上级菜单', trigger: 'change' },
				type: { required: true, message: '请选择菜单类型', trigger: 'change' },
				orderIndex: { required: true, message: '请选择排序号', trigger: 'blur' },
				urlPath: { required: true, message: '请输入菜单地址', trigger: 'blur' },
				pathType: { required: true, message: '请选择链接类型', trigger: 'change' }
			},
			//展示表单数据
			showData: {
				menuID:null,
				comment: null,
				name: null,
				code: null,
				parentID: "-1",
				type:1,
				level:1,
				orderIndex:1,
				urlPath:null,
				pathType:1,
				iconStr:null,
				isUse:0,
				innerCode:null
			},
			//表单加载值
			formLoading: false,
			//字典数据
			paramDatas: {
				orgType: [],
				orgState: [],
				enterpriseNature: []
			},
			//表单数据填写显示方法
			formDataShow:{
				urlPath:false,
				pathType:false,
				iconStr:true,
				isUse:false
			},
			//图标列表数据
			iconListData:[]
		};
	},
	computed: {
		//字典表翻译
		getParamNameByCode() {
			return function(paramCode, value) {
				let code = this.$myUtil.getParamInfoNameByCode(this.paramDatas[paramCode], value);
				return code;
			};
		},
		//菜单类型转换
		MenuTypeCodeForName(){
			return function(code){
				if(code==1){
					return "顶级菜单";
				}else if(code==2){
					return "功能菜单";
				}else if(code==3){
					return "按钮";
				}
			}
		}
	},
	mounted() {
		this.iconListData = this.$myUtil.getIconCodeList();
		this.getTableDatas();
	},
	methods: {
		//查询表格数据
		getTableDatas() {
			let _this = this;
                menuAPI.list()
				.then(function(response) {
					//console.log(response);
					if (response.code == '0000') {
						let treeData = _this.$myUtil.list2TreeData(response.data,"-1", 'menuID');
						console.dir(treeData);
						_this.tableData = treeData;
					} 
				});
		},
		//查询级联下拉数据
		getCascaderData(id) {
			let _this = this;
            menuAPI.list()
            .then(function(response) {
				if (response.code == '0000') {
					let treeData = _this.$myUtil.listToCascaderTreeData(response.data, 'menuID', 'name', 'menuID', id);
					//console.dir(treeData);
					_this.cascaderData = treeData;
				}
			});
		},
		//级联下拉数据切换
		cascaderChange(data){
			
			if(data.length>0){
				this.saveOrEditData.parentID = data[data.length-1];
				this.saveOrEditData.level = data.length;
				
				let idss = data[data.length-1];
				if(idss=="-1"){
					this.saveOrEditData.parentID = "-1";
					this.saveOrEditData.level = 1;
					this.saveOrEditData.type = 1;
				}
				
			}else{
				this.saveOrEditData.parentID = "-1";
				this.saveOrEditData.level = 1;
				this.saveOrEditData.type = 1;
			}
			
		},
		//菜单类型切换
		pathTypeChange(data){
			
			
		},
		//重置查询条件表单
		resetQueryForm() {
			this.queryForm = {
				name: null,
				legalPerson: null,
				orgType: null,
				orgState: null
			};
			this.getTableDatas();
		},
		//重置添加、编辑、展示表单
		resetAddOrEditOrShowForm() {
			this.showData = {
				menuID:null,
				comment: null,
				name: null,
				code: null,
				parentID: "-1",
				type:1,
				level:1,
				orderIndex:1,
				urlPath:null,
				pathType:1,
				iconStr:null,
				isUse:0,
				innerCode:null
			};
			this.saveOrEditData = {
				menuID:null,
				comment: null,
				name: null,
				code: null,
				parentID: "-1",
				type:1,
				level:1,
				orderIndex:1,
				urlPath:null,
				pathType:1,
				iconStr:null,
				isUse:0,
				innerCode:null
			};
			this.formDataShow = {
					urlPath:false,
					pathType:false,
					iconStr:true,
					isUse:false
				}
		},
		//提交-添加、编辑表单
		submitSaveOrEdit() {
			let _this = this;
			this.$refs.saveOrEditDataForm.validate(valid => {
				if (valid) {
					this.formLoading = true;
					let _this = this;

                    if(_this.dialog.isEdit == true){// 编辑菜单
                        menuAPI.update(_this.saveOrEditData)
                            .then(function(res) {
                            if (res.code == '0000') {
                                _this.dialog.saveOrEditDiv = false;
                                _this.resetAddOrEditOrShowForm();
                                _this.formLoading = false;
                                _this.getTableDatas();
                            } else {
                                _this.formLoading = false;
                            }
					    });
                    }else{// 添加菜单
                        menuAPI.add(_this.saveOrEditData)
                            .then(function(res) {
                            if (res.code == '0000') {
                                _this.dialog.saveOrEditDiv = false;
                                _this.resetAddOrEditOrShowForm();
                                _this.formLoading = false;
                                _this.getTableDatas();
                            } else {
                                _this.formLoading = false;
                            }
					    });
                    }
				} else {
					return false;
				}
			});
		},
		//提交-删除
		submitDelete(ids) {
			let _this = this;
                menuAPI.deletes(ids)
				.then(res => {
					if (res.code == '0000') {
						_this.getTableDatas();
					}
				});
		},
		//行-查看
		rowShow(data) {
			this.showData = JSON.parse(JSON.stringify(data));
			this.dialog.showDiv = true;
		},
		//行-编辑
		rowEdit(data) {
			
			this.getCascaderData(data.menuID);
			this.dialog.saveOrEditDiv = true;
			this.saveOrEditData = JSON.parse(JSON.stringify(data));
			this.dialog.isEdit = true;
			this.typeChange(data.type);
		},
		//行-删除
		rowDelete(data) {
			this.$confirm('删除将会删除子集组织数据，确定要删除吗?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			}).then(() => {
				this.submitDelete(data.innerCode);
			});
		},
		//行-添加子节点
		rowAddSon(data){
			if(data.type==3){
				this.$notify.warning({
					title: '操作提示',
					message: "功能按钮不能添加子节点"
				});
				return;
			}
			
			this.dialog.isEdit = false;
			this.dialog.saveOrEditDiv = true;
			this.getCascaderData();
			
			this.saveOrEditData.parentID = data.menuID;
			this.saveOrEditData.level = data.level+1;
			this.saveOrEditData.type = data.level+1;
			this.typeChange(data.level+1);
			
			
		},
		//点击批量删除
		moreDeletes() {
			if (this.nowTableSelected.length <= 0) {
				this.$notify.warning({
					title: '删除提示',
					message: '请至少选择一条数据再删除'
				});
				return;
			}
			let ids = '';

			for (var i in this.nowTableSelected) {
				ids += this.nowTableSelected[i].innerCode + ',';
			}

			ids = ids.substring(0, ids.length - 1);

			//调用删除
			this.submitDelete(ids);
		},
		//表格批量选择
		tableDataSelected(data) {
			this.nowTableSelected = data;
		},
		//菜单类型切换
		typeChange(data){
			if(data == "1"){
				this.formDataShow = {
					urlPath:false,
					pathType:false,
					iconStr:true,
					isUse:false
				}
			}else if(data == "2"){
				this.formDataShow = {
					urlPath:true,
					pathType:true,
					iconStr:true,
					isUse:true
				}
			}else if(data == "3"){
				this.formDataShow = {
					urlPath:false,
					pathType:false,
					iconStr:false,
					isUse:true
				}
			}
		}
	}
};
</script>

<style scoped></style>
